<template>
	<view class="page content">
		<u-navbar :fixed="true" :placeholder="true" title="购物车" bgColor="#ffffff" :autoBack="true"
			titleStyle="{color: #000000}" leftIconColor="#000000">

			<view slot="right" class="u-nav-slot"
				:style="{'margin-right': navbar_right_button_margin_right + 'px', color: show_cart_manager ? '#CB0011' : '#000000' }"
				@click="show_cart_manager = !show_cart_manager">管理</view>
		</u-navbar>


		<view class="page-ctx">
			<scroll-view scroll-y class="products-scroll-y" style="width: 100%;height: calc(100vh-80px); ">
				<view class="product-wrap">
					<view class="product-list" v-if="cart_products.length">
						<view class="product-item flex-between" v-for="(item,index) in cart_products" :key="index">
							<view class="select-box flex-center" @click="doProductToggleSelect(item,index)">
								<view class="icon-box">
									<image v-if="item.is_selected" src="@/static/common/radio1.png" mode=""></image>
								</view>
							</view>
							<view class="poster-box">
								<image :src="item.image" mode="aspectFill"></image>
							</view>
							<view class="info-box">
								<view class="title-box">
									<view class="title">
										{{item.title}}
									</view>
								</view>
								<!-- <view class="remark">
									{{item.remark  || ''}}
								</view> -->
								<view class="guige">
									{{item.keyVals}}
								</view>
								<view class="price-box flex-between">
									<view class="price-info">
										<text class="huobi">￥</text>
										<text class="value">{{item.priceSale}}</text>
									</view>
									<view class="act-box">
										<u-number-box v-model="item.num"
										 :asyncChange="true"
										 :step="1" :min="0" :max="item.kucun"
											@change="(e) => valChange(e, item)" bgColor="#E8EDF5" color="#9695A3" inputWidth="25"
											buttonSize="25" iconStyle="color: #9695A3"></u-number-box>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="empty-wrap" v-else>
						<w_empty emptyText="您的购物车是空的~"></w_empty>
					</view>

					<!-- 猜你喜欢 -->
					<!-- <view class="cai-xihuan" >
						<view class="xihuan-tag">
							<image src="/static/goods/xihuan.png"></image>
						</view>
						<view class="like-goods-list">
							<productList :list="Likeproducts"></productList>
						</view>
					</view> -->
				</view>
			</scroll-view>
		</view>

		<view class="page-foot" v-if="!show_cart_manager">
			<view class="safe-fixed-bottom" :class="{'is_h5': is_env_h5}">
				<view class="jiesuan-box flex-between">
					<view class="select-all-box flex" @click="doCartToggleSelectAll()">
						<view class="icon-box">
							<image v-if="cart_is_selected_all" src="@/static/common/radio1.png" mode=""></image>
						</view>
						<view class="select-text">
							全选
						</view>
					</view>
					<view class="price-box flex">
						<view class="label">
							合计应付：
						</view>
						<view class="price">
							<text class="huobi">￥</text>
							<text class="value">{{cart_selected_price}}</text>
						</view>
					</view>
					<view class="btns flex-center">
						<view class="btn flex-center btn-buy" @click="toPayment()">
							结算
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="page-foot" :class="{'is_h5': is_env_h5}" v-if="show_cart_manager">
			<view class="safe-fixed-bottom" :class="{'is_h5': is_env_h5}">
				<view class="manager-box flex-between">
					<view class="select-all-box flex" @click="doCartToggleSelectAll()">
						<view class="icon-box">
							<image v-if="cart_is_selected_all" src="@/static/common/radio1.png" mode=""></image>
						</view>
						<view class="select-text">
							全选
						</view>
					</view>
					<view class="btns flex-center">
						<view class="btn flex-center btn-buy" @click="doCartDeleteSelect()">
							删除
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 删除提示 -->
		<cart_delete_product_pop ref="cart_delete_product_pop" @confirm="doConfirmDeleteSelect" />
	</view>
</template>

<script>
	import cart_delete_product_pop from "@/components/cart/cart_delete_product_pop.vue";
	import productList from '@/components/product/productList.vue'

	export default {
		components: {
			cart_delete_product_pop,
			productList
		},
		data() {
			return {
				navbar_right_button_margin_right: 0, //顶部导航栏右侧【管理按钮】右边距
				show_cart_manager: false, //是否展示购物车管理
				// #ifdef H5
				is_env_h5: true, //
				// #endif
				// #ifndef H5
				is_env_h5: false, //
				// #endif

				//
				cart_is_selected_all: false,
				cart_products: [], //产品列表
				cart_total_num: 0, //购物车总数量
				cart_total_price: 0, //购物车总金额
				pagination: {
					page: 1,
					pageNum: 10
				},
				loadmore_status: 'loadmore', //loadmore  / loading / nomore
				Likeproducts: [],
				//
				
				delele_type: '',
				delete_product_item: {}
			};
		},

		computed: {
			//商品
			cart_products_selected() {
				return this.cart_products.filter(v => v.is_selected)
			},
			has_cart_products_selected() {
				return this.cart_products_selected.length > 0
			},
			cart_selected_price() {
				let total = 0;
				if (this.cart_products_selected.length) {
					this.cart_products_selected.forEach(v => {
						total += v.priceSale * v.num
					})
				}
				total = (parseFloat(total)).toFixed(2)
				return total
			}
		},

		onLoad() {
			// #ifdef MP
			this.getMenuRect()
			// #endif
		},

		onReachBottom() {
			this.loadMore()
		},

		onShow() {
			this.initQuery()
			this.query_cart();
			// this.query_like_goods()
		},

		methods: {
			initQuery() {
				this.Likeproducts = [];
				this.pagination.page = 1;
				this.loadmore_status = 'loadmore'
			},

			loadMore() {
				console.log(this.loadmore_status, '1200')
				if (this.loadmore_status == 'loadmore') {
					this.loadmore_status = 'loading'
					this.pagination.page++;
					this.query_product();
				}
			},
			getMenuRect() {
				let system_info = uni.getSystemInfoSync();
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				this.navbar_right_button_margin_right = system_info.windowWidth - menuButtonInfo.left
				this.$log('获取系统信息', system_info)
				this.$log('胶囊按钮位置信息 menuButtonInfo', menuButtonInfo)
			},

			query_cart() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'gouwuche_lists',
					},
				}).then(res => {
					if (res.code == 200) {
						let cart_total_num = 0;
						let cart_total_price = 0;
						this.cart_is_selected_all = false
						let list = res.data
						list.forEach(v => {
							v.num = parseInt(v.num);
							v.is_selected = false;
							v.keyVals = v.keyVals == '无' ? '默认' : v.keyVals
							cart_total_num += parseInt(v.num)
							cart_total_price += parseInt(v.num) * parseFloat(v.priceSale)
						})
						this.cart_total_num = cart_total_num;
						this.cart_total_price = (parseFloat(cart_total_price)).toFixed(2);
						this.cart_products = list;

						this.$store.commit('set_vuex_cart_number', cart_total_num)
					}
				})
			},

			// 切换产品勾选
			doProductToggleSelect(item, index) {
				item.is_selected = !item.is_selected
				this.cart_products.splice(index, 1, item)

				//
				if (this.cart_products.some(v => !v.is_selected)) {
					this.cart_is_selected_all = false
				} else {
					this.cart_is_selected_all = true
				}
			},

			// 购物车切换股癣
			doCartToggleSelectAll() {
				this.cart_is_selected_all = !this.cart_is_selected_all

				this.cart_products.forEach(v => {
					v.is_selected = this.cart_is_selected_all
				})
			},

			doCartDeleteSelect() {
				this.delele_type = 'manager';
				
				if (!this.has_cart_products_selected) {
					this.$alert('请先勾选要删除的购物车产品')
					return
				}
				this.$refs.cart_delete_product_pop.init()
			},

			doConfirmDeleteSelect() {
				let guige_ids = ''
				if(this.delele_type == 'single') {//删除单个
					guige_ids = this.delete_product_item.inventoryId
				} else {//删除所有勾选
					guige_ids = this.cart_products_selected.map(v => v.inventoryId).join(',')
				}
				
				
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'gouwuche_del',
						inventoryId: guige_ids, //产品规格id(多个用,分开)
					},
				}).then(res => {
					if (res.code == 200) {
						if(this.delele_type == 'single') {
							this.cart_products = this.cart_products.filter(v => v.inventoryId != this.delete_product_item.inventoryId);
						} else {
							this.cart_products = this.cart_products.filter(v => !v.is_selected);
						}
						
						this.$store.commit('set_vuex_cart_number', res.data.count)
						this.show_cart_manager = false;
					}
				})
			},


			valChange(e, item) {
				this.$log('item', item)
				console.log('e', e)
				console.log('e 当前值为: ' + e.value)

				let num = e.value;
				
				if(num >= item.kucun) {
					return
				}
				if(num == 0) {
					this.$refs.cart_delete_product_pop.init();
					this.delete_product_item = item;
					this.delele_type = 'single';
					return
				}
				item.num = num;
				
				
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'gouwuche_updateNum',
						inventoryId: item.inventoryId, //产品规格id(多个用,分开)
						num: num,
					},
				}).then(res => {
					if (res.code == 200) {
						// this.cart_products = this.cart_products.filter(v => !v.is_selected);
						this.$store.commit('set_vuex_cart_number', res.data.count)
						
						let index = this.cart_products.find(v => v.inventoryId == item.inventoryId)
						this.cart_products.splice(index, 1, item)
					}
				})
			},

			toPayment() {
				if (this.cart_products_selected && this.cart_products_selected.length == 0) {
					this.$alert('请加购商品')
					return;
				}

				let items_format = this.cart_products_selected.map(v => ({
					title: v.title,
					image: v.image,
					inventoryId: v.inventoryId,
					productId: v.productId,
					keyVals: v.keyVals,
					num: v.num,
					priceSale: v.priceSale,
					priceMarket: v.priceMarket,
				}));
				
				this.$store.commit('set_cache_payment_products', JSON.stringify(items_format))

				// return 
				this.toRoute({
					path: '/order-submit',
					query: {
						from: 'cart'
					}
				})
			},

			query_like_goods() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'product_plist',
						car_tui: 1, //产品规格id(多个用,分开)
						...this.pagination,
					},
				}).then(res => {
					if (res.code == 200) {
						this.Likeproducts = this.Likeproducts.concat(res.data);
						this.loadmore_status = res.data.count > this.Likeproducts.length ? 'loadmore' : 'nomore';
					}
				})

			}

		}
	}
</script>


<style lang="scss">
	page {
		background: #F8F8F8;
	}
</style>

<style lang="scss" scoped>
	::v-deep .u-number-box__minus {
		width: 25px;
	}

	::v-deep .u-number-box__plus {
		width: 25px;
	}


	.page {}

	.page-ctx {}

	.products-scroll-y {}

	.product-wrap {
		padding: 24rpx 32rpx 180rpx;

		.product-list {
			.product-item {
				margin-bottom: 24rpx;
				padding: 40rpx 0;
				background: #FFFFFF;
				// box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				.select-box {
					align-self: stretch;
					width: 88rpx;

					.icon-box {
						width: 40rpx;
						height: 40rpx;
						border: 2rpx solid #E1E3E8;
						border-radius: 50%;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.poster-box {
					width: 168rpx;
					height: 168rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.info-box {
					flex: 1;
					overflow: hidden;
					padding-left: 32rpx;
					padding-right: 24rpx;

					.title-box {
						min-height: 50rpx;

						.title {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #000000;
							line-height: 1.5;
						}
					}

					.remark {
						margin-top: 4rpx;
						height: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #838B9E;
					}

					.guige {
						margin-top: 8rpx;
						height: 34rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #838B9E;
					}

					.price-box {
						margin-top: 18rpx;

						.price-info {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #000000;

							.huobi {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 20rpx;
								color: #000000;
							}

							.value {
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								font-size: 32rpx;
								color: #000000;
							}
						}

						.act-box {}
					}
				}

			}
		}
	}


	.page-foot {
		.safe-fixed-bottom {
			&.is_h5 {
				position: fixed;
				bottom: 102rpx;
			}
		}
	}


	// 底部操作
	.page-foot {


		.jiesuan-box {
			width: 100%;

			.select-all-box {
				flex: 1;
				height: 80rpx;
				overflow: hidden;

				.icon-box {
					width: 40rpx;
					height: 40rpx;
					border: 2rpx solid #E1E3E8;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.select-text {
					margin-left: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
				}
			}


			.price-box {
				justify-content: flex-end;
				padding-right: 26rpx;

				.label {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #222222;
				}

				.price {
					.huobi {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #E23410;
					}

					.value {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #E23410;
					}
				}
			}

			.btns {
				.btn {
					width: 192rpx;
					height: 80rpx;
					background: #CB0011;
					border-radius: 40rpx 40rpx 40rpx 40rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}
	}



	// 底部操作
	.page-foot {
		.manager-box {
			width: 100%;

			.select-all-box {
				height: 80rpx;
				flex: 1;
				// overflow: hidden;

				.icon-box {
					width: 40rpx;
					height: 40rpx;
					border: 2rpx solid #E1E3E8;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.select-text {
					margin-left: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
				}
			}


			.btns {
				.btn {
					width: 224rpx;
					height: 80rpx;
					background: #CB0011;
					border-radius: 60rpx 60rpx 60rpx 60rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.cai-xihuan {
		margin-top: 34rpx;

		.xihuan-tag {
			display: flex;
			justify-content: center;
		}

		image {
			width: 448rpx;
			height: 40rpx;
		}

		.like-goods-list {
			margin-top: 26rpx;
		}
	}
</style>